import React from "react";
import { TabBar } from "antd-mobile";
import {withRouter} from "react-router-dom"
import My from "../my/My"

class TabBarExample extends React.Component {
  constructor(props) {
    super(props);
    console.log(props);
    this.state = {
      selectedTab: "redTab",
      hidden: false,
      fullScreen: true,
    };
  }

  render() {
    return (
      <div
        style={
          this.state.fullScreen
            ? { position: "fixed", height: "100%", width: "100%", top: 0 }
            : { height: 400 }
        }
      >
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#ff2d4a"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          <TabBar.Item
            title="首页"
            key="index"
            icon={<i className="iconfont icon-shouye"></i>}
            selectedIcon={
              <i
                className="iconfont icon-shouye"
                style={{ color: "#ff2d4a" }}
              ></i>
            }
            selected={this.props.location.pathname==="/"}
            onPress={() => {
                this.props.history.push("/");
            }}
          >
            {this.props.location.pathname==="/"&&this.props.children}
          </TabBar.Item>
          <TabBar.Item
            icon={<i className="iconfont icon-fenlei"></i>}
            selectedIcon={
              <i
                className="iconfont icon-fenlei"
                style={{ color: "#ff2d4a" }}
              ></i>
            }
            title="分类"
            key="category"
            selected={this.props.location.pathname==="/category"}
            onPress={() => {
                this.props.history.push("/category");
            }}
          >
            {this.props.location.pathname==="/category"&&this.props.children}
            {/* //加个阀门避免两次mount请求两次，打印两次，在前面做个类似判断即可，
            若前面不满足，后面就不会运行，就不会多次打印
             */}
          </TabBar.Item>
          <TabBar.Item
            icon={<i className="iconfont icon-gouwuche"></i>}
            selectedIcon={
              <i
                className="iconfont icon-gouwuche"
                style={{ color: "#ff2d4a" }}
              ></i>
            }
            title="购物车"
            key="cart"
            selected={this.props.location.pathname==="/cart"}
            onPress={() => {
                this.props.history.push("/cart");
            }}
          >
            {this.props.location.pathname==="/cart"&&this.props.children}
          </TabBar.Item>
          <TabBar.Item
            icon={<i className="iconfont icon-wode"></i>}
            selectedIcon={
              <i
                className="iconfont icon-wode"
                style={{ color: "#ff2d4a" }}
              ></i>
            }
            title="My"
            key="my"
            selected={this.props.location.pathname==="/my"}
            onPress={() => {
                this.props.history.push("/my")
            }}
          >
            {this.props.location.pathname==="/my"&&this.props.children}
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}

//高阶组件中的withRouter, 作用是将一个组件包裹进Route里面,
// 然后react-router的三个对象history, location, match就会被放进这个组件的props属性中.
export default withRouter(TabBarExample)
